import { inject, onMounted } from "vue"
import { rainyYear } from "@/models/getRainyHttp"
import axios from "axios"
import { mapStore } from "@/stores/counter"
export const rainy = () => {
    const store = mapStore()
    let map
    let scene
    let data
    let geojson_rainy
    onMounted(async () => {
        map = inject('$map')
        scene = inject('$scene')
        const res = await rainyYear(store.selectedYear)
        const lines = res.split('\n')
        // 获取城市
        data = lines.slice(1).map(item => {
            const value = item.split(',')
            return {
                date: value[0],
                name: value[2],
                rainy: value[4],
                lng: parseFloat(value[8]),
                lat: parseFloat(value[9])
            }
        })
    })

    const rain = async () => {
        store.isEchart = false
        store.issunItem = false
        store.istempItem = false
        store.israinyItem = true
        store.ispmItem = false
        store.isRainy = true
        store.isGDP = false
        store.isPM = false
        store.isSun = false
        store.isTemp = false
        store.isClick = true
        // 动态切换年份
        const res = await rainyYear(store.selectedYear)
        const lines = res.split('\n')
        // 获取城市
        data = lines.slice(1).map(item => {
            const value = item.split(',')
            return {
                date: value[0],
                name: value[2],
                rainy: parseInt(value[4]),
                lng: parseFloat(value[8]),
                lat: parseFloat(value[9])
            }
        })

        let rainyData = data.sort((a, b) => b.rainy - a.rainy).slice(0, 10)
        store.rainyItem_option = {
            title: {
                text: `${store.selectedYear}年降雨量最高城市`,
                left: 'center',
                top: '2%',
                textStyle: {
                    color: '#fff',

                },
            },
            dataset: {
                source: [
                    ['year', 'rainy', 'name'],
                    ...rainyData.map(item => [item.year, item.rainy, item.name])
                ]
            },
            grid: {
                left: '20%',
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            xAxis: {
                name: 'pm', axisLabel: {
                    color: '#fff'
                }
            },
            yAxis: {
                type: 'category', axisLabel: {
                    color: '#fff'
                }
            },
            series: [
                {
                    type: 'bar',
                    encode: {
                        x: 'rainy',
                        y: 'name'
                    },
                    itemStyle: {
                        color: 'lightblue'
                    }
                }
            ]
        };

        if (scene.getLayers().length != 0) {
            scene.removeAllLayer()
        }

        // 转为geojson数据
        geojson_rainy = {
            type: 'FeatureCollection',
            features: data.map(item => ({
                type: "Feature",
                geometry: {
                    type: 'Point',
                    coordinates: [item.lng, item.lat]
                },
                properties: {
                    name: item.name,
                    date: item.date,
                    rainy: (item.rainy) / 30
                }
            }))
        }
        const layer = new L7.HeatmapLayer({})
            .source(geojson_rainy)
            .shape('heatmap')
            .size('rainy', [0, 1]) // weight映射通道
            .style({
                intensity: 2,
                radius: 20,
                rampColors: {
                    colors: ['#FF4818', '#F7B74A', '#FFF598', '#91EABC', '#2EA9A1', '#206C7C'].reverse(),
                    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
                },
            });

        scene.addLayer(layer);
    }

    const renderRainy = () => {
        rain()
    }

    return {
        rain,
        renderRainy,
    }
}